<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{$title}{$title?' - ':''}{:C('WEB_SITE_TITLE')}</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__ASSET__/Home/v4/src/css/sm.min.css">
    <style>
      *{margin:0;padding:0}
      body{font:400 14px/1.5 "\5FAE\8F6F\96C5\9ED1",Helvetica;color:#000;background-color:#fff;-webkit-user-select:none;-webkit-text-size-adjust:none}
      p{margin:.5rem 0;font-size:.9rem}
      .big_size{font-size:.9rem;font-weight:700}
      .center_size{font-size:.8rem}
      .small_size{font-size:.7rem}
      .bar-nav-new{background:#349ff9}
      .content-padding{padding:0 .5rem}
      .h1_title{color:#fff;font-size:1.2rem}
      .zx_title{font-size:1.15rem;margin-top:2.2rem}
      .zx_title_sub{font-size:.75rem;padding-left:.6rem}
      .grey-color{color:#767676;margin:0 .1rem}
      .comment_all{font-size:.8rem;height:1.6rem;border-bottom:1px solid #d4d4d4;line-height:1.6rem;color:#2a2a2a}
      .radius-50{border-radius:50%;-webkit-border-radius:50%}
      .nickname{margin:0;font-size:.75rem;color:#999}
      .commit_con{font-size:.65rem;margin:.2rem 0}
      .commit_time{color:#999;font-size:.6rem;margin:.2rem 0}
      .border{border-bottom:1px solid #d4d4d4}
      .fix_bottom{position:fixed;left:0;bottom:0;width:100%;z-index:1000;height:50px;background:rgba(34,137,223,.9);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-top:1px solid #2289df;-webkit-box-shadow:0 0 3px #666;box-shadow:0 0 3px #666;padding:4px 10px}
      .feix_login{width:40px;height:40px;background:url(__PUBLIC__/Home/v4/src/images/logo2.png) no-repeat;background-size:100% 100%;float:left}
      .fix_bottom_con{margin-left:5px;width:52%;float:left;font-size:1rem;line-height:.72rem;color:#fff}
      .fix_bottom_con_sub{font-size:.7rem;color:#e8e9ea}
      .fix_bottom_con p{font-size:.65rem;margin:0}
      .download_btn{float:left;width:60px;height:32px;margin-top:5px;background:#fff;border-radius:5px;-webkit-border-radius:5px;text-align:center;line-height:32px;color:#2289e9}
      .close_btn{width:25px;height:25px;text-indent:-99999px;margin-top:8px;display:block;float:left;margin-left:8px;background:url(__PUBLIC__/Home/v4/src/images/close_v.png) no-repeat;background-size:100% 100%}
      .white{color:#fff}
      .font13{font-size:12px}
      .my-info-level{margin-left:10px;height:22px;line-height:22px;text-align:center;border-radius:10px;display:inline-block;padding:0 8px}
      .blue-level-bg{background:#2fc0fb}
      .violet-level-bg{background:#a68eff}
      .pink-level-bg{background:#fa8484}
      .orange-level-bg{background:#f99d18}
      .yellow-level-bg{background:#fed137}
      .video_area{overflow:hidden;border:none}
      iframe{border:none}
      .popbg{background:#000;position:absolute;top:0;left:0;width:100%;z-index:1000;height:100%;display:none}
      #myPopup{height:200px;padding:2rem 1.5rem;text-align:center;z-index:2000;width:94%;left:50%;border-radius:.5em;display:none;top:50%;position:fixed;background:#fff;margin-left:-47%;margin-top:-100px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
      #myPopup .ui-content-p{font-size:.74rem;color:#333;font-family:"微软雅黑"}
      .btncolum>button,.btncolum>button.ui-btn{font-weight:lighter;text-shadow:none;margin:0;padding:.8rem 0;background-color:#ededed;border-color:#ddd;color:#333;line-height:1rem;text-shadow:0 1px 0 #f3f3f3;width:44%;display:inline-block;border-radius:5px;border:1px solid #ddd;font-family:"微软雅黑"}
      .btncolum>button.ok{background:#349ff9;border:solid 1px #349ff9;color:#fff}
      .pseron_url{position:relative;width:52px}
      .newG-icon{position:absolute;width:32px;height:32px;right:-5px;bottom:-5px}
      .page{background:#fff}
      .comment_icon{width:24px;height:24px;display:inline-block;background:url(__PUBLIC__/Home/v4/src/images/commit_icon.png) no-repeat;background-size:100% 100%;float:left;margin-right:10px}
      @media screen and (min-width:360px){.fix_bottom_con p{font-size:.73rem;line-height:1rem}
      .fix_bottom_con{width:58%}
      }
      @media screen and (min-width:370px){.fix_bottom_con p{font-size:.78rem}
      .fix_bottom_con{width:60%}
      }
      @media screen and (min-width:410px){.fix_bottom_con{width:63%}
      }
    </style>
    <script type="text/javascript">
      {:C('GLOBAL_BDHM')}
    </script>
  </head>
  <body  style="-webkit-overflow-scrollling:touch;">
        <div class="page">
              <div class="content content-padding" style="margin-bottom:50px;">
                  <header class="bar bar-nav bar-nav-new js-header">
                     <h1 class="title h1_title">资讯</h1>
                  </header>
                 <p class="zx_title">{$news.title}</p>
                 <div class="row zx_title_sub">
                       <div class="col-30">作者:<span  class="grey-color">{$news.author|mb_substr=0,6}</span></div>
                       <div class="col-40">发布时间:<span class="grey-color">{$news.create_time|date="m-d",###}</span></div>
                       <div class="col-30">浏览:<span class="grey-color">{$news.read}</span></div>
                 </div>
                 <volist name="news.content" id="content">
                      <switch name="content.type">
                          <case value="text">
                            <if condition="$content['data']['bold'] == 1">
                              <p class="big_size">
                            <else />
                              <p class="center_size">
                            </if>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$content.data.content}
                            </p>
                          </case>
                          <case value="image">
                            <img src="__PUBLIC__/Home/v4/src/images/explore-default.jpg" class="test-lazyload" alt="" style="width: 100%;"  data-original="{$content.data.url}">
                          </case>
                          <case value="video">
                           <div class="video_area">
                              <iframe src="/video/play-mobile-{$content.data.id}.html" scrolling="no" width="100%" height="100%" id="frame_video"></iframe>
                            </div>
                          </case>
                      </switch>
                 </volist>
                  <!-- 评论部分 -->
                  <div class="commit_area">
                      <p  class="comment_all"><span class="comment_icon"></span><span style="float:left;margin-top:-4px;">全部评论</span></p>
                  </div>
              </div>
              <div class="fix_bottom">
                     <div class="feix_login"></div>
                     <div class="fix_bottom_con">
                          <p>上66play客户端</p>
                          <p class="fix_bottom_con_sub">高清视频 高光片段 一览无余</p>
                     </div>
                     <a href="ly66play://66play?type=news&id={$news.id}" class="external" onclick="show_popup()">
                          <span class="download_btn">下载</span>
                     </a>
                     <span class="close_btn">下载</span>
              </div>
               <div  id="myPopup" class="ui-content usepop back_white">
                       <p class="ui-content-p">您还没有下载APP哦~本功能需要安装66Play APP之后才能使用。快来下载吧</p>
                       <div class="btncolum display-box">
                         <button class="box-flexo cancel ui-btn ui-shadow ui-corner-all" onclick="hid()">取消下载</button>
                         <button class="box-flexo ok ui-btn ui-shadow ui-corner-all" onclick="download()">立即下载</button>
                      </div>
            </div>
            <div class="popbg" onclick="hid()"></div>
    </div>
    <script type='text/javascript' src='__ASSET__/Home/v4/lib/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='__ASSET__/Home/v4/lib/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='__ASSET__/Home/v4/lib/js/zepto.picLazyLoad.min.js' charset='utf-8'></script>
    <script src="__ASSET__/Home/v4/lib/js/date_format.js"></script>
    <script src="__ASSET__/Home/v4/lib/js/browser.js"></script>
    <script>
        window._COMMON = {
              public_url: "__ASSET__", //项目公共目录地址
        }
        window._THIS = {
             "comments":"/api/news/comments?limit=5&id={$news.id}",
             downloadUrl : "{:U('/')}",
        }
      $(function(){
            if (browser.versions.isWeibo || browser.versions.isWeixin || browser.versions.isQq) {
                $('.js-header').remove();
                $(".zx_title").css({"margin-top":0});
            }
            setTimeout(function(){
                load_comments();
            },5)
            change_video_window();
            $(".close_btn").on('click',function(){
                $(".fix_bottom").remove();
                $(".content-padding").css({"margin-bottom":0});
           })
           $.init();
      })
      setInterval(function(){
            $('.test-lazyload').picLazyLoad();
      },800)
      function download () {
            window.location.href = _THIS.downloadUrl;
     }
      function  change_video_window () {
           var  getWidth=$(window).width();
           var  getHeight=Math.ceil(9*getWidth/16);
           $(".video_area").css({"height":getHeight})
      }
      function  load_comments () {
         $.get(_THIS.comments,function(data){
              if(data.code==200){
                  var lists=data.data.lists;
                 if(lists.length>0){
                        var commit_str="";
                            $.each(lists,function(k,ele){
                            var create_time = new Date(ele.create_time*1000);
                                create_time= create_time.timeAgo();
                                avatar=(ele.avatar!='' && ele.avatar!=undefined)?ele.avatar:_COMMON.public_url+'/Home/v4/src/images/avatar-mr.png';
                             var content=ele.content.replace(/\[([a-z]+)\]/g,'<img src="'+_COMMON.public_url+'/Home/v4/src/face/$1.gif" style="width:24px;height:24px;"/>');
                                auth=ele.user.auth!=undefined?'<img src="'+ele.user.auth.pic+'" title="'+ele.user.auth.name+'" class="newG-icon">':'';
                            var level=set_level(ele.user.level ? ele.user.level : 0);
                                commit_str+='<div class="row no-gutter" style="padding:5px 0;">\
                                      <div class="col-20">\
                                           <div class="pseron_url">\
                                             <img class="radius-50" src="'+avatar+'"  width="48" height="48">'+auth+'</div>\
                                      </div>\
                                      <div class="col-80 border">\
                                           <p  class="nickname">'+ele.nickname+level+'</p>\
                                           <p  class="commit_con">'+content+'</p>\
                                           <p  class="commit_time">'+create_time+'</p>\
                                      </div>\
                                      </div>';
                             })
                            $(".commit_area").append(commit_str);
                            
                     }else{
                       $(".commit_area").hide();
                  }
              }
         })
      } 
      function  hid () {
           $("#myPopup").hide();
           $(".popbg").hide();
     }
      function show_popup () {
             var popup_w=$("#myPopup").width();
             var popup_h=$("#myPopup").height();
             $("#myPopup").show();
             $(".popbg").css({"height":$(window).height()}).show();
     }
      function  set_level (level) {
              var level_color='';
              if(level!=undefined){ 
                  if(level>0 && level<=5){
                    level_color='green01-bg';
                      }else  if(level>5 && level<=10){
                          level_color='blue-level-bg';
                      }else if(level>10 && level<=15){
                           level_color='violet-level-bg';
                      }else if(level>15 && level<=20){
                            level_color='pink-level-bg';
                      }else if(level>20 && level<=25){
                           level_color='orange-level-bg';
                      }else{
                           level_color='yellow-level-bg';
                 }
              }else{
                  level_color='green01-bg';
                  level=1;
              }
              return  '<em class="my-info-level '+level_color+' white font13">LV.'+level+'</em>'
    }
    </script>
  </body>
</html>